<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>绘制星空</title>
    <link rel="icon" href="https://img.kaikeba.com/kkb_portal_icon.ico" />
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }

      #canvas {
        background: url('./images/sky.jpg');
        background-size: cover;
        background-position: right bottom;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas"></canvas>
    <!-- 顶点着色器 -->
    <script id="vertexShader" type="x-shader/x-vertex">
      attribute vec4 a_Position;
      attribute float a_PointSize;
      void main(){
          //点位
          gl_Position=a_Position;
          //尺寸
          gl_PointSize=a_PointSize;
      }
    </script>
    <!-- 片元着色器 -->
    <script id="fragmentShader" type="x-shader/x-fragment">
      precision mediump float;
      uniform vec4 u_FragColor;
      void main(){
        float dist=distance(gl_PointCoord,vec2(0.5,0.5));
        if(dist<0.5){
          gl_FragColor=u_FragColor;
        }else{
          discard;
        }
      }
    </script>
    <script type="module">
      import { initShaders } from '../jsm/Utils.js'

      const canvas = document.querySelector('#canvas')
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight

      // 获取着色器文本
      const vsSource = document.querySelector('#vertexShader').innerText
      const fsSource = document.querySelector('#fragmentShader').innerText

      //三维画笔
      const gl = canvas.getContext('webgl')
      // 开启片元的颜色合成功能，才能改变透明度
      gl.enable(gl.BLEND)
      gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)

      //初始化着色器
      initShaders(gl, vsSource, fsSource)

      //设置attribute 变量
      // a_Position=vec4(1,0,0,1)
      const a_Position = gl.getAttribLocation(gl.program, 'a_Position')
      const a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize')
      const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor')

      const stars = []

      //修改attribute 变量
      // gl.vertexAttrib3f(a_Position, 0, 1, 0);
      // gl.vertexAttrib2f(a_Position, 0.5, 0.5);
      // gl.vertexAttrib1f(a_Position, 0.1);

      //声明颜色 rgba
      gl.clearColor(0, 0, 0, 0)
      //刷底色
      gl.clear(gl.COLOR_BUFFER_BIT)

      //绘制顶点
      // gl.drawArrays(gl.POINTS, 0, 1);
      render()

      // 鼠标点击事件
      canvas.addEventListener('click', ({ clientX, clientY }) => {
        console.log(clientX, clientY)
        const { left, top, width, height } = canvas.getBoundingClientRect()
        const [cssX, cssY] = [clientX - left, clientY - top]

        //解决坐标原点位置的差异
        const [halfWidth, halfHeight] = [width / 2, height / 2]
        const [xBaseCenter, yBaseCenter] = [cssX - halfWidth, cssY - halfHeight]
        // 解决y 方向的差异
        const yBaseCenterTop = -yBaseCenter
        //解决坐标基底的差异
        const [x, y] = [xBaseCenter / halfWidth, yBaseCenterTop / halfHeight]

        // gl.vertexAttrib2f(a_Position, x, y);
        // gl.clear(gl.COLOR_BUFFER_BIT);
        // gl.drawArrays(gl.POINTS, 0, 1);
        const s = Math.random() * 5 + 2
        const a = Math.random()
        stars.push({ x, y, s, a })
        render()
      })

      // 渲染方法
      function render() {
        gl.clear(gl.COLOR_BUFFER_BIT)
        stars.forEach(({ x, y, s, a }) => {
          gl.vertexAttrib2f(a_Position, x, y)
          gl.vertexAttrib1f(a_PointSize, s)
          const arr = new Float32Array([0.87, 0.91, 1, a])
          gl.uniform4fv(u_FragColor, arr)
          gl.drawArrays(gl.POINTS, 0, 1)
        })
      }
    </script>
  </body>
</html>
